<!DOCTYPE html>

<html>
    <head>
        <title>a place to stay</title>
        <meta charset="${_response_encoding}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/style.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/jquery.dataTables.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/jquery.dataTables_themeroller.css'}">
        <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/jquery.lightbox-0.5.css'}">
        #{get 'moreStyles' /}
        <link rel="shortcut icon" type="image/png" href="@{'/public/images/favicon.png'}">
        <script src="@{'/public/javascripts/jquery-1.7.1.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
        <script src="@{'/public/javascripts/jquery.lightbox-0.5.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    	<script type="text/javascript">
    		var geocoder;
    		var map;
    	
			function initialize() {
				geocoder = new google.maps.Geocoder();
				var address = "${event.zipcode} ${event.city}, ${event.street} ${event.streetNumber}"
				drawMapWithEvent(address);
				var offers =  new Array();
						#{list items:offerList, as:'offer'}
							offers.push(
							{ 
								'address': "${offer.zipcode} ${offer.city}, ${offer.street} ${offer.streetNumber}",
								'id': "${offer.id}",
								'time': "#{if offer.endDate == offer.startDate} on ${offer.startDate.format('dd MMMM yyyy')}#{/if}
										#{else}${offer.startDate.format('dd MMMM')} – ${offer.endDate.format('dd MMMM yyyy')}#{/else}",
								'price': "${offer.price.formatCurrency('EUR')}",
								'label' :  "#{if offer.commercial}${offer.user.hotelname}#{/if}#{else}Private#{/else}"			
							}
							);
						#{/list}
						
						#{list items:premiumOfferList, as:'offer'}
							offers.push(
							{ 
								'address': "${offer.zipcode} ${offer.city}, ${offer.street} ${offer.streetNumber}",
								'id': "${offer.id}",
								'time': "#{if offer.endDate == offer.startDate} on ${offer.startDate.format('dd MMMM yyyy')}#{/if}
										#{else}${offer.startDate.format('dd MMMM')} – ${offer.endDate.format('dd MMMM yyyy')}#{/else}",
								'price': "${offer.price.formatCurrency('EUR')}",
								'label' :  "#{if offer.commercial}${offer.user.hotelname}#{/if}#{else}Private#{/else}"			
							}
							);
						#{/list}				
			
				addOffersOnMap(offers);
			}
			
			function drawMapWithEvent(address) {
		    	geocoder.geocode( { 'address': address}, function(results, status) {
			     	var image = new google.maps.MarkerImage('@{Events.showPicture(event.id)}', null, null, null, new google.maps.Size(60, 60));
			      	if (status == google.maps.GeocoderStatus.OK) {
			        var myOptions = {
			        zoom: 13,
			        center: results[0].geometry.location,
			        mapTypeId: google.maps.MapTypeId.ROADMAP
			        }
			        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
			
			        var marker = new google.maps.Marker({
		        	icon: image,
		            map: map,
		            position: results[0].geometry.location,
		            title: "${event.name}"
		        });
		      }
		    });
		  }
		  
			function addOffersOnMap(offers) {
			    for (var i = 0; i < offers.length; ++i) {
			        (function(offer) {
			            geocoder.geocode({
			                'address': offer.address
			            }, function(results, status) {
			            	
			            	if (status == google.maps.GeocoderStatus.OK) {
			            		
			            		var contentString = 
							      	'<div><b>' + offer.label + '</b><br><span>Location: <br>'
									 + offer.address + 
									 '<br>' 
									 + offer.time + 
									 '<br><div class="price">' 
									 + offer.price + 
									 '</div><br><a class="showOfferDetails" href=/offers?id=' 
									 + offer.id + 
									 '>&nbsp;Contact&nbsp;</div>';
			            		
			            		var marker = new google.maps.Marker({
			                    	map: map,
			                    	position: results[0].geometry.location,
			                    	title: offer.label
			                	});

			            		var infowindow = new google.maps.InfoWindow({
				        			content: contentString,
				        			maxWidth: 200
				        			});
			            		
			                	google.maps.event.addListener(marker, 'click', function() {
			                		infowindow.open(map, marker);
			                	});
			            	}
			            });
			        })(offers[i]);
			    }
			}	
			
		  
						
						
			function loadScript() {
				var script = document.createElement("script");
				script.type = "text/javascript";
				script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyD1E683QUpxHhNJ30apnL-AvcDHdoo6YxM&sensor=false&callback=initialize";
				document.body.appendChild(script);
			}
			
			window.onload = loadScript;
			
			    	</script>
        
        #{get 'moreScripts' /}
        <style type="text/css">
  			#map_canvas { height: 500px }
		</style>
    </head>
    <body>
   <div id="wrapper">

	<header id="header">
		 <h1><a href="@{Application.index()}"> <img src="@{'/public/images/logo.png'}"></a></h1>
                <div id="menu_top">
                    <a href="@{Application.index()}"><span class="dashed">search</span></a>
                    <a href="/faq"><span class="dashed">faq</span></a>
                    #{if user}
                    	<a href="@{Offers.create()}"><span class="dashed">new offer</span></a>
                    	<a href="@{Events.create()}"><span class="dashed">new event</span></a>
                    	#{if user && user.isAdmin()}
                    		<a href="@{AdminInterface.index()}"><span class="dashed">administration</span></a>
                    	#{/if}
                    	<a href="@{Secure.logout()}"><span class="dashed">log-out</span></a>
                    	<a href="@{Profile.show(user.id)}"><div class="loggedin">Logged in as ${user.firstname}  ${user.lastname}</div></a>
                    #{/if}
                    #{else}
                    	<a href="@{Registration.indexCommercial()}"><span class="dashed">register</span></a>
                    	<a href="@{Application.login()}"><span class="dashed">sign-in</span></a>
                    #{/else}
                </div>
	</header><!-- #header-->
        
        <section class="dark_line"></section>

	<section id="middle">

		<div id="container">
			<div id="content">
				#{doLayout /}
                        </div><!-- #content-->
		</div><!-- #container-->
		<aside id="sideLeft">
			<ul class="menu_left">
                            <li><a href="@{Application.index(selection, models.EventCategory.CONCERTS, initial)}">concerts</a></li>
                            <li><a href="@{Application.index(selection, models.EventCategory.SPORTS, initial)}">sports</a></li>
                            <li><a href="@{Application.index(selection, models.EventCategory.CULTURAL, initial)}">cultural</a></li>
                            <li><a href="@{Application.index(selection, models.EventCategory.MUSICAL, initial)}">musicals</a></li>
                            <li><a href="@{Application.index(selection, models.EventCategory.COMEDY, initial)}">comedy</a></li>
                            <li><a href="@{Application.index(selection, models.EventCategory.BUSINESS, initial)}">business</a></li>
                            <li><a href="@{Application.index(selection, models.EventCategory.FAIRS, initial)}">fairs</a></li>
                            <li><a href="@{Application.index(selection, models.EventCategory.OTHER, initial)}">other</a></li>
                        </ul>
		</aside><!-- #sideLeft -->

	</section><!-- #middle-->

        <section class="dark_line"></section>
	<footer id="footer">
		<a href="/aboutUs"><span class="dashed">about us</span></a>
	</footer><!-- #footer -->

</div><!-- #wrapper -->
        
    </body>
</html>
